<template>
  <h2>模板语法：插值</h2>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">通过v-once控制不随绑定的值变更</div>
    <div  class="zhtt-demo-card-body">
      <input v-model="counter1" class="zhtt-input">
      <p>counter1：{{counter1}}</p>
      <p v-once>counter1：{{counter1}}</p>
    </div>
    <div class="zhtt-demo-card-footer"></div>
  </div>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">原始HTML</div>
    <div  class="zhtt-demo-card-body">
      <input v-model="counter2" class="zhtt-input">
      <p>Using mustaches: {{ counter2 }}</p>
      <p>Using v-html directive: <span v-html="counter2"></span></p>
    </div>
    <div class="zhtt-demo-card-footer">语法：v-html</div>
  </div>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">Attribute</div>
    <div  class="zhtt-demo-card-body">
      {{counter1}} &nbsp;{{isButtonDisabled}}<br/>
      <button class="zhtt-btn" v-bind:disabled="isButtonDisabled">按钮:{{isButtonDisabled}}</button> &nbsp;
      <button class="zhtt-btn" type="button" v-on:click="updateIsButtonDisabled()">updateIsButtonDisabled()</button>
    </div>
    <div class="zhtt-demo-card-footer">
      语法：v-bind<br/>
      值为null时，将不会绑定<br/>
    </div>
  </div>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">使用JavaScript表达式</div>
    <div  class="zhtt-demo-card-body">
      {{counter1}} &nbsp;{{isButtonDisabled}}<br/>
      {{counter1>0.3}} &nbsp; {{isButtonDisabled?'isButtonDisabled值为真':'isButtonDisabled值为假'}}
      <button class="zhtt-btn" type="button" v-on:click="updateIsButtonDisabled()">updateIsButtonDisabled()</button>
    </div>
    <div class="zhtt-demo-card-footer"><b>模板表达式无法访问用户自定义的全局变量</b></div>
  </div>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">指令</div>
    <div  class="zhtt-demo-card-body">
      v-if="变量"： <span v-if="isButtonDisabled">现在看到我了</span><br/>
      参数： v-bind:href="url"：<a target="_blank" v-bind:href="url">{{url}}</a><br/>
      动态参数： v-bind:[attributeName]="url"： <a target="_blank" v-bind:[attributeName]="url"> attributeName = {{attributeName}} </a><br/>
      动态事件： v-on:[eventName]="doSomething"：<a v-on:[eventName]="updateIsButtonDisabled"> {{ eventName }} </a>
    </div>
    <div class="zhtt-demo-card-footer"><b>动态参数变量名不能为大写，因为浏览器会强制变为小写</b></div>
  </div>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">缩写</div>
    <div  class="zhtt-demo-card-body">
      参数： :href="url"：<a target="_blank" :href="url">{{url}}</a><br/>
      动态参数： :[attributeName]="url"： <a target="_blank" :[attributeName]="url"> attributeName = {{attributeName}} </a><br/>
      事件： @click="doSomething"：<a @click="updateIsButtonDisabled"> click </a><br/>
      动态事件： @[eventName]="doSomething"：<a @[eventName]="updateIsButtonDisabled"> {{ eventName }} </a><br/>
    </div>
    <div class="zhtt-demo-card-footer"><b>将动态参数值设为null，则可移除此属性；</b></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      counter1: 'counter1',
      counter2: '<b>这是被b标签包裹的一段文本</b>',
      isButtonDisabled:true,
      url:'https://v3.cn.vuejs.org/guide/',
      attributeName:'href',
      eventName:'mousemove',
    }
  },
  methods: {
    updateCounter1(){
      this.counter1 = Math.random();
    },
    updateIsButtonDisabled(){
      this.updateCounter1();
      this.isButtonDisabled = this.counter1>0.4;
    }
  }
}
</script>